<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- card头部 -->
        <!-- <template>
          <div class="clearfix">
            <span>组织结构</span>
          </div>
        </template> -->
        <el-tabs value="first" class="clearfix">
          <el-tab-pane label="组织结构" name="first" />
        </el-tabs>
        <div class="tree-box">
          <!-- 头部结构 -->
          <TreeTools
            :node-data="company"
            root
            style="border-bottom: 1px solid #ccc; margin-bottom: 10px;font-weight: 700"
            @showDialog="showDialogFn"
          />
          <!-- 树形组件 -->
          <el-tree :data="departs" default-expand-all :props="defaultProps">
            <template v-slot="{data}">
              <TreeTools
                :node-data="data"
                @updateDep="updateDep"
                @showDialog="showDialogFn"
                @edit="editFn"
              />
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <AddDepartment
      ref="add"
      :show-dialog.sync="showDialog"
      :node-date="currentDate"
      @updateDep="updateDep"
    />
  </div>
</template>
<script>
import TreeTools from './TreeTools'
import AddDepartment from './AddDepartment'
import { getDepartmentList, listToTree } from '@/api/departments'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepartment
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        label: 'name'
      },
      company: {
        name: '知科科文化创意有限公司',
        manager: '负责人',
        // 解决顶级节点新增部门校验问题,如果没有id,校验拿到的id为undefined,则会直接校验通过,
        id: ''
      },
      loading: false,
      showDialog: false,
      currentDate: {}
    }
  },
  async created() {
    this.updateDep()
  },
  methods: {
    async updateDep() {
      this.loading = true
      const data = await getDepartmentList()
      // console.log(data)
      this.departs = listToTree(data.depts)
      this.loading = false
    },
    showDialogFn(nodeData) {
      this.showDialog = true
      this.currentDate = nodeData
    },
    // 点击查看部门显示弹窗
    editFn(nodeData) {
      this.currentDate = nodeData
      this.showDialog = true
      this.$refs.add.getInfo(nodeData.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix {
  padding-top: 20px;
  padding-left: 40px;
}
.tree-box {
  padding: 30px 140px;
  font-size: 14px;
}
::v-deep {
  .el-col {
    height: 30px;
    line-height: 30px;
  }
  .el-icon-caret-right:before {
    content: "\e723";
    color: #000;
  }
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
  }
  .el-tree-node__expand-icon.expanded::before {
    content: "\e722";
    color: #000;
  }

  .el-tree-node__expand-icon.is-leaf::before {
    content: "\e7a5";
    color: #000;
  }

}
</style>

